<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>interview | DiDi</title>
  <meta name="description" content="基础什么是盒模型？盒模型分为标准盒模型和 IE 盒模型。标准盒模型：width+padding+border; 实际网页中占据大小：width+padding+border+marginIE 盒模型： width; 实际在网页中占据的大小： width+margin可以通过修改元素的 box-sizing 属性来改变元素的盒模型：• box-sizing: content-box 表示标准盒模型•">
<meta property="og:type" content="article">
<meta property="og:title" content="interview">
<meta property="og:url" content="https://guoyayunhappy.gitee.io/didiblog/2025/06/17/interview/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="基础什么是盒模型？盒模型分为标准盒模型和 IE 盒模型。标准盒模型：width+padding+border; 实际网页中占据大小：width+padding+border+marginIE 盒模型： width; 实际在网页中占据的大小： width+margin可以通过修改元素的 box-sizing 属性来改变元素的盒模型：• box-sizing: content-box 表示标准盒模型•">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2025-06-17T03:52:38.000Z">
<meta property="article:modified_time" content="2025-07-09T12:40:14.869Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="算法">
<meta property="article:tag" content="js">
<meta property="article:tag" content="性能优化">
<meta name="twitter:card" content="summary">
  <!-- Canonical links -->
  <link rel="canonical" href="https://guoyayunhappy.gitee.io/didiblog/2025/06/17/interview/index.html">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="images/favatar/idesign-logo.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/didiblog/css/style.css">

  
  
  
  
<meta name="generator" content="Hexo 7.3.0"></head>


<body class="main-center theme-black" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="https://gitee.com/GuoyayunHappy" target="_blank">
          <img class="img-circle img-rotate" src="/didiblog/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">一枚@大帅锅</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">CV工程师</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> Shanghai, China</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav menu-highlight">
        
        
        <li class="menu-item menu-item-home">
          <a href="/didiblog/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">首页</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/didiblog/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">归档</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/didiblog/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">分类</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/didiblog/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">标签</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-links">
          <a href="/didiblog/links">
            
            <i class="icon icon-friendship"></i>
            
            <span class="menu-title">友链</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-about">
          <a href="/didiblog/about">
            
            <i class="icon icon-cup-fill"></i>
            
            <span class="menu-title">关于</span>
          </a>
        </li>
        
      </ul>
      
	
    <ul class="social-links">
    	
        <li><a href="https://gitee.com/GuoyayunHappy" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="/didiblog/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">公告</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>让coding更有趣!</p>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title">分类</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/didiblog/categories/JS/">JS</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/didiblog/categories/TS/">TS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/didiblog/categories/%E7%BD%91%E7%AB%99/">网站</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/didiblog/categories/%E7%BD%91%E7%AB%99/html/">html</a><span class="category-list-count">1</span></li></ul></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">标签</h3>
    <div class="widget-body">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/HTML/" rel="tag">HTML</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/HTTP/" rel="tag">HTTP</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/HTTPS/" rel="tag">HTTPS</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/JS/" rel="tag">JS</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/Nodejs/" rel="tag">Nodejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/Token/" rel="tag">Token</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/cookie/" rel="tag">cookie</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/js/" rel="tag">js</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/typescript/" rel="tag">typescript</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" rel="tag">性能优化</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/%E7%AE%97%E6%B3%95/" rel="tag">算法</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/%E7%BC%93%E5%AD%98/" rel="tag">缓存</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" rel="tag">设计模式</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/didiblog/tags/%E8%B7%A8%E5%9F%9F/" rel="tag">跨域</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">标签云</h3>
    <div class="widget-body tagcloud">
      <a href="/didiblog/tags/HTML/" style="font-size: 13px;">HTML</a> <a href="/didiblog/tags/HTTP/" style="font-size: 13px;">HTTP</a> <a href="/didiblog/tags/HTTPS/" style="font-size: 13px;">HTTPS</a> <a href="/didiblog/tags/JS/" style="font-size: 13px;">JS</a> <a href="/didiblog/tags/Nodejs/" style="font-size: 13px;">Nodejs</a> <a href="/didiblog/tags/Token/" style="font-size: 13px;">Token</a> <a href="/didiblog/tags/cookie/" style="font-size: 13px;">cookie</a> <a href="/didiblog/tags/js/" style="font-size: 13px;">js</a> <a href="/didiblog/tags/typescript/" style="font-size: 13px;">typescript</a> <a href="/didiblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" style="font-size: 13px;">性能优化</a> <a href="/didiblog/tags/%E7%AE%97%E6%B3%95/" style="font-size: 13.5px;">算法</a> <a href="/didiblog/tags/%E7%BC%93%E5%AD%98/" style="font-size: 13px;">缓存</a> <a href="/didiblog/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 14px;">设计模式</a> <a href="/didiblog/tags/%E8%B7%A8%E5%9F%9F/" style="font-size: 13px;">跨域</a>
    </div>
  </div>

    
      
  <div class="widget">
    <h3 class="widget-title">归档</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/didiblog/archives/2025/07/">七月 2025</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/didiblog/archives/2025/06/">六月 2025</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/didiblog/archives/2024/03/">三月 2024</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/didiblog/archives/2024/02/">二月 2024</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/didiblog/archives/2023/12/">十二月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/didiblog/archives/2023/10/">十月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/didiblog/archives/2023/02/">二月 2023</a><span class="archive-list-count">7</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/didiblog/2025/07/28/browser-cache/" class="title">用代码实践浏览器的强缓存和协商缓存</a>
              </p>
              <p class="item-date">
                <time datetime="2025-07-28T06:54:53.000Z" itemprop="datePublished">2025-07-28</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/didiblog/categories/JS/">JS</a>
              </p>
              <p class="item-title">
                <a href="/didiblog/2025/07/18/tail-call-optimization/" class="title">尾调用优化</a>
              </p>
              <p class="item-date">
                <time datetime="2025-07-18T11:53:08.000Z" itemprop="datePublished">2025-07-18</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/didiblog/2025/06/17/interview/" class="title">interview</a>
              </p>
              <p class="item-date">
                <time datetime="2025-06-17T03:52:38.000Z" itemprop="datePublished">2025-06-17</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/didiblog/2024/03/03/find-hamilton-path/" class="title">Javascript实现寻找哈密尔顿回路</a>
              </p>
              <p class="item-date">
                <time datetime="2024-03-03T00:18:45.000Z" itemprop="datePublished">2024-03-03</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/didiblog/2024/02/21/better-to-know-signature-and-certificate/" class="title">一文读懂加密，摘要，数字签名和证书</a>
              </p>
              <p class="item-date">
                <time datetime="2024-02-21T03:22:45.000Z" itemprop="datePublished">2024-02-21</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  <div class="content">
  <article id="post-interview" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      interview
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/didiblog/2025/06/17/interview/" class="article-date">
	  <time datetime="2025-06-17T03:52:38.000Z" itemprop="datePublished">2025-06-17</time>
	</a>
</span>
        
        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link-link" href="/didiblog/tags/js/" rel="tag">js</a>, <a class="article-tag-link-link" href="/didiblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" rel="tag">性能优化</a>, <a class="article-tag-link-link" href="/didiblog/tags/%E7%AE%97%E6%B3%95/" rel="tag">算法</a>
  </span>


        

        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/didiblog/2025/06/17/interview/#comments" class="article-comment-link">评论</a></span>
        
      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <h2 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h2><h2 id="什么是盒模型？"><a href="#什么是盒模型？" class="headerlink" title="什么是盒模型？"></a>什么是盒模型？</h2><p>盒模型分为标准盒模型和 IE 盒模型。<br>标准盒模型：width+padding+border; 实际网页中占据大小：width+padding+border+margin<br>IE 盒模型： width; 实际在网页中占据的大小： width+margin<br>可以通过修改元素的 box-sizing 属性来改变元素的盒模型：<br>• box-sizing: content-box 表示标准盒模型<br>• box-sizing: border-box 表示 IE 盒模型</p>
<h3 id="axios-是否可以取消请求？"><a href="#axios-是否可以取消请求？" class="headerlink" title="axios 是否可以取消请求？"></a>axios 是否可以取消请求？</h3><p>可以。有两种方法，分别是 cancelToken 和 AbortController</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">CancelToken:</span><br><span class="line">const CancelToken = axios.CancelToken;</span><br><span class="line">const source = CancelToken.source();</span><br><span class="line">axios.post(&quot;/user/12345&quot;, &#123; name: &quot;new name&quot; &#125;, &#123; cancelToken: source.token &#125;);</span><br><span class="line">source.cancel(&quot;Operation canceled by the user.&quot;);</span><br><span class="line"></span><br><span class="line">AbortController:</span><br><span class="line">const controller = new AbortController();</span><br><span class="line">axios.get(&quot;/foo/bar&quot;, &#123; signal: controller.signal &#125;).then(function (response) &#123; //... &#125;);</span><br><span class="line">controller.abort();</span><br></pre></td></tr></table></figure>

<p>通过文档描述和示例代码，可以总结出以下功能点：<br>• 支持 cancelToken 取消请求，cancelToken 可以通过工厂函数产生，也可以通过构造函数生成；<br>• 支持 Fetch API 的 AbortController 取消请求；<br>• 一个 token&#x2F;signal 可以取消多个请求，一个请求也可同时使用 token&#x2F;signal；<br>• 如果在开始 axios request 之前执行了取消请求，则并不会发出真实的请求。</p>
<h3 id="什么是同源策略？如何实现不同域共享-cookie？"><a href="#什么是同源策略？如何实现不同域共享-cookie？" class="headerlink" title="什么是同源策略？如何实现不同域共享 cookie？"></a>什么是同源策略？如何实现不同域共享 cookie？</h3><p>通常，Cookie 不能直接在不同域间共享，这源于浏览器同源策略，该策略由协议、域名和端口号共同界定“源”，只有三者完全相同才属同源，Cookie 才能在其间共享。<br>但在特定条件和技术手段下，可实现不同域间一定程度的 Cookie 共享，同时，Cookie 也能设置为在同主域下的子域间共享，具体如下<br>不同域共享 cookie</p>
<ol>
<li>跨域资源共享(CORS: Cross-Origin Resource Sharing）): 在服务端设置 allow-Control-Allow-Origin 等相应头信息。允许特定跨域请求，但主要用于跨域资源请求，对 cookie 有一定的限制。首先要在前端请求头加上配置 credentials: ‘include’， 后端的 allow-control-allow-origin 需要指定运行跨域携带 cookie 的域名而不能是通配符”*”.</li>
<li>JSONP：利用 script 标签跨域特性实现跨域数据获取，可间接模拟 Cookie 部分功能，但并非真正的 Cookie 共享.</li>
<li>跨域 Cookie 共享技术方案：如单点登录（SSO）系统采用 OAuth、OpenID Connect 等协议实现跨域身份验证与授权，在此过程中实现用户信息与相关 Cookie 的共享。但这需要多个域间统一配置管理，且有专门认证服务器协调</li>
</ol>
<h4 id="同主域下子域共享-Cookie"><a href="#同主域下子域共享-Cookie" class="headerlink" title="同主域下子域共享 Cookie"></a>同主域下子域共享 Cookie</h4><ul>
<li>实现原理：设置 Domain 属性，若将其设置为主域，该 cookie 所在主域及其所有子域都可以使用。 如，主域 example.com，将 Cookie 的 Domain 设为.example.com，则在 sub1.example.com、sub2.example.com 等子域都能访问使用此 Cookie。</li>
<li>实现方法:</li>
<li><ul>
<li>服务端设置：使用各种服务器端编程语言，通过 HTTP 响应头设置实现。如 Java 中利用 HttpServletResponse 对象设置 Cookie 的 Domain 属性。</li>
</ul>
</li>
<li><ul>
<li>客户端设置：浏览器端可用 JavaScript 设置 Cookie，使其在同主域下子域共享，但受浏览器同源策略与安全限制</li>
</ul>
</li>
</ul>
<h3 id="移动端适配，如何把-PX-转化成-REM？"><a href="#移动端适配，如何把-PX-转化成-REM？" class="headerlink" title="移动端适配，如何把 PX 转化成 REM？"></a>移动端适配，如何把 PX 转化成 REM？</h3><ul>
<li>原理：REM 是相对于根元素（html 元素）的字体大小的单位，当根元素的字体大小发生改变时，所有基于 REM 的元素大小都会随之改变。因此，通过动态改变根元素的字体大小，可以实现移动端适配。</li>
<li>实现方法：</li>
<li><ul>
<li>利用 JavaScript 动态计算根元素的字体大小，通常根据屏幕宽度或设计稿宽度来计算。</li>
</ul>
</li>
<li><ul>
<li>监听屏幕宽度变化，动态调整根元素的字体大小，以保证页面在不同屏幕尺寸下的正常显示。</li>
</ul>
</li>
<li><ul>
<li>利用 CSS 媒体查询，针对不同屏幕尺寸设置不同的 REM 基准值，以保证页面在不同屏幕尺寸下的正常显示。</li>
</ul>
</li>
</ul>
<h3 id="可有什么办法让-px-自动转为-rem，-在开发中就直接使用-px？"><a href="#可有什么办法让-px-自动转为-rem，-在开发中就直接使用-px？" class="headerlink" title="可有什么办法让 px 自动转为 rem， 在开发中就直接使用 px？"></a>可有什么办法让 px 自动转为 rem， 在开发中就直接使用 px？</h3><p>在前端开发中，要实现输入 px 但自动转换为 rem ，可以通过以下几种方式：</p>
<ol>
<li>使用 CSS 预处理器(Sass,Less)<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Sass:</span><br><span class="line">@function pxToRem($pxValue) &#123;</span><br><span class="line">@return $pxValue / 16 + rem;</span><br><span class="line">&#125;</span><br><span class="line">.element &#123;</span><br><span class="line">width: pxToRem(100);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">Less：</span><br><span class="line">.pxToRem(@pxValue) &#123;</span><br><span class="line">@remValue: @pxValue / 16;</span><br><span class="line">@return @remValue + rem;</span><br><span class="line">&#125;</span><br><span class="line">.element &#123;</span><br><span class="line">width: pxToRem(100);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>使用构建工具（如 Webpack）的插件. 例如 postcss-pxtorem 插件，它可以在构建过程中自动将 px 转换为 rem 。您需要在配置中设置根元素的字体大小等相关参数。</li>
</ol>
<h3 id="如何在划词选择的文本上添加右键菜单"><a href="#如何在划词选择的文本上添加右键菜单" class="headerlink" title="如何在划词选择的文本上添加右键菜单?"></a>如何在划词选择的文本上添加右键菜单?</h3><ul>
<li>原理：通过监听文本选择事件，获取选择的文本内容，并在右键菜单中添加自定义的操作项。</li>
<li>实现方法：</li>
<li><ul>
<li>监听文本选择事件（如 onselect 事件），获取选择的文本内容。</li>
</ul>
</li>
<li><ul>
<li>在右键菜单中添加自定义的操作项，如“翻译”、“复制”等。</li>
</ul>
</li>
<li><ul>
<li>当用户点击自定义操作项时，执行相应的操作，如调用翻译 API 进行翻译、将文本复制到剪贴板等。</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">document.addEventListener(&quot;contextmenu&quot;, function (event) &#123;</span><br><span class="line">  // 阻止默认的浏览器右键菜单</span><br><span class="line">  event.preventDefault();</span><br><span class="line"></span><br><span class="line">  // 在此处显示自定义右键菜单</span><br><span class="line">  showCustomMenu(event);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="如何实现预览-PDF-文件"><a href="#如何实现预览-PDF-文件" class="headerlink" title="如何实现预览 PDF 文件?"></a>如何实现预览 PDF 文件?</h3><ol>
<li>使用浏览器内置的 PDF 查看器<br>浏览器像 Chrome 和 Firefox 等内置了 PDF 查看器，可以直接在浏览器中打开和预览 PDF 文件。实现方式非常简单，只需将 PDF 文件的 URL 设置为 a 标签的 href 属性，或者使用 window.open 方法在新标签页中打开 PDF 文件。</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 方法1: 使用超链接 --&gt;</span><br><span class="line">&lt;a href=&quot;/path/to/your/document.pdf&quot; target=&quot;_blank&quot;&gt;预览PDF&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 方法2: 使用JavaScript --&gt;</span><br><span class="line">&lt;button onclick=&quot;window.open(&#x27;/path/to/your/document.pdf&#x27;, &#x27;_blank&#x27;)&quot;&gt;预览PDF&lt;/button&gt;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>使用 PDF.js<br>PDF.js 是一个由 Mozilla 开发的开源库，它使用 HTML5 Canvas 来渲染 PDF 文件。PDF.js 提供了广泛的 API 来实现 PDF 的加载、渲染、缩放、打印等功能。<br>如何使用：</li>
</ol>
<p>引入 PDF.js<br>首先，你需要在你的项目中包含 PDF.js。可以从其 GitHub 仓库中直接下载或使用 CDN。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 引入pdf.js和pdf.worker.js --&gt;</span><br><span class="line">&lt;script src=&quot;/path/to/pdf.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src=&quot;/path/to/pdf.worker.js&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>渲染 PDF 文件 使用 PDF.js 提供的 API 来加载和渲染 PDF 文件。 3. 使用第三方服务<br>也可以使用第三方服务如 Google Docs Viewer 来预览 PDF。这种方法的优点是容易实现，但依赖于外部服务。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;iframe</span><br><span class="line">  src=&quot;http://docs.google.com/gview?url=http://path.to/your/document.pdf&amp;embedded=true&quot;</span><br><span class="line">  style=&quot;width:600px; height:500px;&quot;</span><br><span class="line">  frameborder=&quot;0&quot;</span><br><span class="line">&gt;&lt;/iframe&gt;</span><br></pre></td></tr></table></figure>

<p>选择适合的方法</p>
<ul>
<li>简单预览：如果只需要一个简单的 PDF 文件预览，使用浏览器的内置功能是最快的方法。</li>
<li>复杂的 PDF 交互：对于需要复杂交互（如注释、填写表单）的 PDF 文件，PDF.js 提供了更多控制和定制选项。</li>
<li>简易集成但依赖第三方：使用第三方服务是最容易实现的，但您的数据可能会通过第三方服务器传递，需要考虑隐私和安全性。</li>
</ul>
<h3 id="如何减少项目里面-if-else"><a href="#如何减少项目里面-if-else" class="headerlink" title="如何减少项目里面 if-else?"></a>如何减少项目里面 if-else?</h3><ol>
<li>策略模式： 创建一组策略对象，每个对象对应一种条件和处理逻辑。根据不同的条件选择相应的策略对象来执行操作。</li>
<li>表驱动法：建立一个数据结构（如对象或数组），将条件与对应的处理函数或值关联起来，通过查找表来获取相应的处理方式。</li>
<li>多态：如果条件判断基于不同的对象类型，可以使用多态性，让每个对象类型实现自己的处理方法。</li>
<li>提取函数：将每个 if-else 分支中的复杂逻辑提取为独立的函数，以提高代码的可读性和可维护性</li>
<li>状态模式：当条件判断反映的是对象的不同状态时，可以使用状态模式来处理。</li>
</ol>
<h3 id="hooks-调用是可以写在-if-语句里面吗？"><a href="#hooks-调用是可以写在-if-语句里面吗？" class="headerlink" title="hooks 调用是可以写在 if 语句里面吗？"></a>hooks 调用是可以写在 if 语句里面吗？</h3><p>Hooks 必须在函数组件的顶层（不在循环、条件判断或嵌套函数中）按顺序调用。这是因为 React 需要在每次渲染时以相同的顺序调用 Hooks，以正确管理组件的状态和副作用。</p>
<h3 id="ajax-和-xhr-是什么关系？"><a href="#ajax-和-xhr-是什么关系？" class="headerlink" title="ajax 和 xhr 是什么关系？"></a>ajax 和 xhr 是什么关系？</h3><p>Ajax（Asynchronous JavaScript and XML）是一种使用多种技术（包括 XMLHttpRequest（XHR）对象）在后台与服务器进行异步数据交换，而无需重新加载整个网页的 Web 开发技术。<br>XMLHttpRequest 是实现 Ajax 技术的关键对象之一。通过创建 XMLHttpRequest 对象，我们可以使用 JavaScript 向服务器发送请求，并处理服务器返回的响应。<br>简单来说，XMLHttpRequest 是实现 Ajax 的一种底层机制或工具。Ajax 是一个更广泛的概念，涵盖了使用包括 XMLHttpRequest 在内的技术来实现异步数据交互的方法和模式<br>Ajax 是一个异步通讯技术，除了使用创建 XMLHTTPRequest 对象来实现外，还可以用以下方法：</p>
<ol>
<li>fetch API: 是现代浏览器提供的更简洁的一种异步请求方式，基于 Promise</li>
<li>Axios 库: 一个流行的第三方 Ajax 库，提供了丰富的功能和简洁的接口</li>
<li>$.ajax: Jquery 封装的 ajax 方法</li>
</ol>
<h3 id="axios-请求的底层依赖是什么？"><a href="#axios-请求的底层依赖是什么？" class="headerlink" title="axios 请求的底层依赖是什么？"></a>axios 请求的底层依赖是什么？</h3><p>根据不同的环境依赖会有所不同<br>浏览器环境：优先使用 XMLHttpRequest 对象，如果浏览器支持，也会使用 fetch API<br>Node.js: 依赖于 Node.js 的 http 或 https 的模块来发送请求</p>
<h3 id="为何-cdn-请求资源不受跨域限制？"><a href="#为何-cdn-请求资源不受跨域限制？" class="headerlink" title="为何 cdn 请求资源不受跨域限制？"></a>为何 cdn 请求资源不受跨域限制？</h3><p>一些 CDN 资源不受同源策略限制，是因为同源策略主要是浏览器的一种安全机制，用于限制不同源的文档或脚本之间的交互操作，但对于某些特定类型的资源访问，浏览器会有一些例外情况。<br>在 HTML 中，script、img、iframe、link 等标签的 src 属性所指向的资源（如 JavaScript 文件、图片、CSS 文件等）通常是可以跨域访问的。<br>例如，可以在自己的网站中通过 script src&#x3D;”<a target="_blank" rel="noopener" href="https://cdn.example.com/vue.min.js">https://cdn.example.com/vue.min.js</a>“ script 加载来自 CDN 的 Vue.js 库<br>虽然浏览器允许这些资源的跨域加载，但在加载 JavaScript 时，会限制对返回内容的读写权限，以防止恶意脚本获取或修改其他域的信息<br>CDN 服务提供商通常也会采取一些措施来确保资源的安全性和合法性。他们会对资源进行管理和配置，只允许合法的请求访问资源，并防止恶意使用或滥用 CDN 资源</p>
<h3 id="babel-runtime-的作用"><a href="#babel-runtime-的作用" class="headerlink" title="babel-runtime 的作用"></a>babel-runtime 的作用</h3><p>babel-runtime 的主要作用就是将这些可能被重用的代码抽取成单独的模块，以避免在每个文件中重复出现相同的代码。它通过模块导入的方式引入这些功能，从而避免了对全局作用域的修改或污染<br>例如，如果代码中使用了 promise，可以这样导入：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">import promise from &quot;babel-runtime/core-js/promise&quot;;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>总的来说，babel-runtime 更像是一种按需加载的实现方式，适用于开发库、工具等场景，可避免对全局作用域的污染，同时减少重复代码。</p>
<h3 id="日志监控问题：可有办法将请求的调用源码地址包括代码行数也上报上去？"><a href="#日志监控问题：可有办法将请求的调用源码地址包括代码行数也上报上去？" class="headerlink" title="日志监控问题：可有办法将请求的调用源码地址包括代码行数也上报上去？"></a>日志监控问题：可有办法将请求的调用源码地址包括代码行数也上报上去？</h3><p>源码映射(Source Maps)<br>生成 Source Maps:<br>在构建过程中生成功能强大的源码映射（Source Maps）文件是标准做法。Source Maps 主要用于将混淆、压缩后的 JavaScript 代码映射回到其原始版本，允许在浏览器调试工具中查看原始代码和追踪错误。<br>保存映射文件: 在生产版本中生成如.map 的 Source Map 文件，并确保它们正常处理（通常是将它们放置在服务器上的一个公开但安全的位置）。<br>反映在 Source Maps 中的映射: Source Maps 文件应将原始的源文件路径和行号映射到构建后的代码中对应的位置。</p>
<p>Sentry：一个功能强大的错误监控和日志收集工具。支持多种前端框架和语言，能够实时捕获和报告前端应用中的错误和异常，并提供详细的错误上下文信息</p>
<h3 id="前端监控"><a href="#前端监控" class="headerlink" title="前端监控"></a>前端监控</h3><p>意义：保证系统稳定高效，快速解决用户线上问题，用户性能问题；给铲平决策提供更多数据支持</p>
<p>指标：UV：Unique Visitor，即独立访客。它指的是在一定统计周期内访问网站或应用的不重复用户数，通常通过用户的 IP 地址、设备 ID 或登录账号等信息来识别。<br>PV：Page View，即页面浏览量。它表示用户每次对网站或应用中页面的访问次数，无论用户是否重复访问同一页面，每次访问都会被计数</p>
<h3 id="从浏览器地址栏输入-url-到现实页面的步骤："><a href="#从浏览器地址栏输入-url-到现实页面的步骤：" class="headerlink" title="从浏览器地址栏输入 url 到现实页面的步骤："></a>从浏览器地址栏输入 url 到现实页面的步骤：</h3><ol>
<li>浏览器根据 URL 中的域名，向 DNS 服务器请求解析该域名对应的 IP 地址。</li>
<li>浏览器获得 IP 地址后，发起一个 HTTP 请求。</li>
<li>服务器收到请求后，根据 URL 中的路径，找到对应的资源文件。</li>
<li>服务器将资源文件发送回浏览器。</li>
<li>浏览器对加载到的资源（HTML，JS，CSS）进行语法解析，构建 DOM 树。</li>
<li>浏览器根据渲染树，计算每个元素的位置和大小。</li>
<li>浏览器将计算结果显示在屏幕上。</li>
</ol>
<h3 id="浏览器-Eventloop-和-Node-中的区别？"><a href="#浏览器-Eventloop-和-Node-中的区别？" class="headerlink" title="浏览器 Eventloop 和 Node 中的区别？"></a>浏览器 Eventloop 和 Node 中的区别？</h3><p>JS 是非阻塞单线程语言，最初是为了和浏览器交互。如果是多线程 jiu</p>
<h2 id="React"><a href="#React" class="headerlink" title="React"></a>React</h2><h3 id="JSX-是什么？和-Javascript-有什么区别？"><a href="#JSX-是什么？和-Javascript-有什么区别？" class="headerlink" title="JSX 是什么？和 Javascript 有什么区别？"></a>JSX 是什么？和 Javascript 有什么区别？</h3><p>JSX 是 javascript 的语法扩展，它允许编写类似于 HTML 的代码，可以编译为常规的 Javascript 函数调用，这样方便在业务逻辑内编写 UI 组件模块</p>
<h3 id="React-中有哪些-Hooks-分别使用场景是什么？"><a href="#React-中有哪些-Hooks-分别使用场景是什么？" class="headerlink" title="React 中有哪些 Hooks 分别使用场景是什么？"></a>React 中有哪些 Hooks 分别使用场景是什么？</h3><ul>
<li><code>useState</code>：用于在函数组件中添加状态。</li>
<li><code>useEffect</code>：用于在函数组件中执行副作用操作，如数据获取、订阅、手动修改 DOM 等。</li>
<li><code>useContext</code>：用于在组件之间共享数据，而不必通过 props 传递。</li>
<li><code>useReducer</code>：用于管理复杂的状态逻辑，它接收一个 reducer 函数和初始状态，并返回当前状态和 dispatch 方法。</li>
<li><code>useCallback</code>：用于记忆函数，只有在依赖项发生变化时才会重新创建函数。</li>
<li><code>useMemo</code>：用于记忆计算结果，只有在依赖项发生变化时才会重新计算结果。</li>
<li><code>useRef</code>：用于获取 DOM 元素的引用。</li>
<li><code>useLayoutEffect</code>：在所有 DOM 变更之后同步调用 effect。不建议在通用的 useEffect 中使用它，因为它可能阻塞浏览器的渲染。</li>
</ul>
<h3 id="React-中-setState-是同步还是异步？"><a href="#React-中-setState-是同步还是异步？" class="headerlink" title="React 中 setState 是同步还是异步？"></a>React 中 setState 是同步还是异步？</h3><p>setState 是异步的，它会合并多个 setState 调用，批量更新状态，以提高性能。但是，在生命周期方法、事件处理函数、异步函数中调用 setState 时，可能会立即更新状态。</p>
<h3 id="React-中类组件和函数组件有什么区别？"><a href="#React-中类组件和函数组件有什么区别？" class="headerlink" title="React 中类组件和函数组件有什么区别？"></a>React 中类组件和函数组件有什么区别？</h3><p>类组件：使用 ES6 class 定义，有生命周期方法和 state<br>函数组件：使用函数定义，无状态，现在可以使用 Hooks 管理状态和副作用<br>性能上函数组件通常更轻量<br>代码更简洁，易于测试和理解</p>
<h3 id="useEffect-和-useLayoutEffect-有什么区别？"><a href="#useEffect-和-useLayoutEffect-有什么区别？" class="headerlink" title="useEffect 和 useLayoutEffect 有什么区别？"></a>useEffect 和 useLayoutEffect 有什么区别？</h3><p>useEffect：异步执行，不会阻塞浏览器绘制<br>useLayoutEffect：同步执行，在 DOM 更新后但浏览器绘制前运行<br>大多数情况下使用 useEffect，只有在需要同步读取 DOM 布局时才使用 useLayoutEffect</p>
<h3 id="什么是-Context-API？何时使用它？"><a href="#什么是-Context-API？何时使用它？" class="headerlink" title="什么是 Context API？何时使用它？"></a>什么是 Context API？何时使用它？</h3><p>Context 提供了一种在组件树中传递数据的方法，而不必手动在每个层级传递 props。使用场景：<br>全局数据(如主题、用户认证)<br>避免 props drilling(多层传递 props)<br>当数据需要被多个嵌套组件访问时</p>
<h3 id="什么是-React-Fiber？"><a href="#什么是-React-Fiber？" class="headerlink" title="什么是 React Fiber？"></a>什么是 React Fiber？</h3><p>React Fiber 是 React 16+的协调引擎核心算法重新实现。主要改进：</p>
<ul>
<li>增量渲染：将渲染工作拆分为多个小块</li>
<li>任务优先级：可以暂停、中止或复用工作</li>
<li>更好的错误处理和边界</li>
<li>支持返回多个元素(Fragments)</li>
<li>为未来特性(如并发模式)奠定基础、</li>
</ul>
<h3 id="解释-React-的合成事件系统"><a href="#解释-React-的合成事件系统" class="headerlink" title="解释 React 的合成事件系统"></a>解释 React 的合成事件系统</h3><p>React 的合成事件是对浏览器原生事件的跨浏览器包装器。特点：<br>跨浏览器一致性<br>自动事件委托：React 不会将事件附加到 DOM 节点，而是在根节点使用单个事件监听器<br>事件池化：合成事件对象会被复用，事件回调后属性会被清空<br>与原生事件有相同接口，包括 stopPropagation()和 preventDefault()<br>性能优化：减少了内存消耗</p>

      
    </div>
    <div class="article-footer">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://guoyayunhappy.gitee.io/didiblog/2025/06/17/interview/" title="interview" target="_blank" rel="external">https://guoyayunhappy.gitee.io/didiblog/2025/06/17/interview/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://gitee.com/GuoyayunHappy" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/didiblog/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://gitee.com/GuoyayunHappy" target="_blank"><span class="text-dark">一枚@大帅锅</span><small class="ml-1x">CV工程师</small></a></h3>
        <div>个人简介。</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	
      <div id="vcomments"></div>
    
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/didiblog/2025/07/18/tail-call-optimization/" title="尾调用优化"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;上一篇</span></a>
    </li>
    
    
    <li class="next">
      <a href="/didiblog/2024/03/03/find-hamilton-path/" title="Javascript实现寻找哈密尔顿回路"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
  </ul>
  
  
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-fancy btn-donate pop-onhover bg-gradient-warning" data-toggle="modal" data-target="#donateModal"><span>赏</span></button>
  <!-- <div class="wave-icon wave-icon-danger btn-donate" data-toggle="modal" data-target="#donateModal">
    <div class="wave-circle"><span class="icon"><i class="icon icon-bill"></i></span></div>
  </div> -->
  
  
  <div class="bar-right">
    
    <div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,qq,qzone"></div>
    
  </div>
  </div>
</nav>
  
<!-- Modal -->
<div class="modal modal-center modal-small modal-xs-full fade" id="donateModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content donate">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-body">
        <div class="donate-box">
          <div class="donate-head">
            <p>感谢您的支持，我会继续努力的!</p>
          </div>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade active in" id="alipay">
              <div class="donate-payimg">
                <img src="/didiblog/images/donate/alipayimg.png" alt="扫码支持" title="扫一扫" />
              </div>
              <p class="text-muted mv">扫码打赏，你说多少就多少</p>
              <p class="text-grey">打开支付宝扫一扫，即可进行扫码打赏哦</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="wechatpay">
              <div class="donate-payimg">
                <img src="/didiblog/images/donate/wechatpayimg.png" alt="扫码支持" title="扫一扫" />
              </div>
              <p class="text-muted mv">扫码打赏，你说多少就多少</p>
              <p class="text-grey">打开微信扫一扫，即可进行扫码打赏哦</p>
            </div>
          </div>
          <div class="donate-footer">
            <ul class="nav nav-tabs nav-justified" role="tablist">
              <li role="presentation" class="active">
                <a href="#alipay" id="alipay-tab" role="tab" data-toggle="tab" aria-controls="alipay" aria-expanded="true"><i class="icon icon-alipay"></i> 支付宝</a>
              </li>
              <li role="presentation" class="">
                <a href="#wechatpay" role="tab" id="wechatpay-tab" data-toggle="tab" aria-controls="wechatpay" aria-expanded="false"><i class="icon icon-wepay"></i> 微信支付</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
	
    <ul class="social-links">
    	
        <li><a href="https://gitee.com/GuoyayunHappy" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="/didiblog/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    <div class="copyright">
    	
        <div class="publishby">
        	Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
        </div>
    </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/didiblog/js/plugin.min.js"></script>


<script src="/didiblog/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/didiblog/',
        CONTENT_URL: '/didiblog/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/didiblog/js/insight.js"></script>






   




   
    
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/valine"></script>
  <script type="text/javascript">
  var GUEST = ['nick', 'mail', 'link'];
  var meta = 'nick,mail,link';
  meta = meta.split(',').filter(function(item) {
    return GUEST.indexOf(item) > -1;
  });
  new Valine({
    el: '#vcomments',
    verify: false,
    notify: false,
    appId: '',
    appKey: '',
    placeholder: 'Just go go',
    avatar: 'mm',
    meta: meta,
    pageSize: '10' || 10,
    visitor: false
  });
  </script>

     







</body>
</html>